<template>
    <!--  提交审批  920px-->
    <div class="formcss">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <!-- 1 -->
            <el-row>
                <el-col span="4">
                    <el-form-item style="width:200px">
                        <el-input v-model="formInline.theme" placeholder="审批主题" />
                    </el-form-item>
                </el-col>
                <el-col span="4">
                    <el-form-item style="width:200px">
                        <el-input v-model="formInline.applyname" placeholder="填报人姓名" />
                    </el-form-item>
                </el-col>
                <el-col span="4">
                    <el-form-item style="width: 200px">
                        <el-input v-model="formInline.applygrude" placeholder="填报人职务" />
                    </el-form-item>
                </el-col>

                <el-col span="4">
                    <el-form-item style="width: 200px">
                        <el-input v-model="formInline.phone" placeholder="填报人手机" />
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 2 -->
            <el-row>
                <el-col span="4">
                    <el-form-item style="width: 200px">
                        <el-input v-model="formInline.fixphone" placeholder="固定电话" />
                    </el-form-item>
                </el-col>

                <el-col span="4">
                    <el-form-item style="width: 200px">
                        <el-input v-model="formInline.property" placeholder="审批性质" />
                    </el-form-item>
                </el-col>

                <el-col span="12">
                    <el-form-item>
                        <el-select v-model="formInline.know" placeholder="负责人知晓" style="width: 200px">
                            <el-option label="是" value="1" />
                            <el-option label="否" value="0" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <el-form-item style="width: 200px">
                        <el-input v-model="formInline.use" placeholder="用途" />
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 3 -->
            <el-row>
                <el-col span="12">
                    <el-form-item style="width: 200px">
                        <el-input v-model="formInline.area" placeholder="用地面积" />
                    </el-form-item>
                </el-col>

                <el-col span="12">
                    <el-form-item style="width: 200px">
                        <el-input v-model="formInline.projectnume" placeholder="项目名称" />
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <el-form-item style="width: 200px">
                        <el-input v-model="formInline.projecrplanning" placeholder="项目规划" />
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <el-form-item style="width: 200px">
                        <el-input v-model="formInline.projectinvestment" placeholder="项目投资" />
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 4 -->
            <el-row>
                <el-col span="12">
                    <el-form-item style="width: 200px">
                        <el-input v-model="formInline.designdirection" placeholder="设计方向" />
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <el-form-item style="width: 200px">
                        <el-input v-model="formInline.designt" placeholder="设计技术" />
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <el-form-item style="width: 200px">
                        <el-input v-model="formInline.plan" placeholder="工程规划" />
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <el-form-item style="width: 200px">
                        <el-input v-model="formInline.opinion" placeholder="企业意见" />
                    </el-form-item>
                </el-col>
                <!-- </el-row>
            <el-row> -->
                <el-col span="12">
                    <el-form-item style="width: 200px;">
                        <el-input v-model="formInline.Time" placeholder="工程时长" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <div class="hh">
        <!--问题提交区域 1336*251-->
        <div class="text-area" style="display: flex;justify-content: space-around;align-items: center">
            <el-input v-model="formInline.textarea" :rows="9" type="textarea" placeholder="Please input" />
        </div>
    </div>
    <div class="mybtn">
        <el-upload ref="upload" class="upload-demo" action="http://1.14.73.59:8080/sp/upload2" :limit="1"
            :on-exceed="handleExceed" :auto-upload="false">
            <template #trigger>
                <el-button type="primary">选择材料</el-button>
            </template>
            <el-button class="ml-3" type="success" @click="submitUpload">
                上传材料
            </el-button>
            <template #tip>
                <div class="el-upload__tip text-red">
                    limit 1 file, new file will cover the old file
                </div>
            </template>
        </el-upload>

    </div>

    <div class="btn">
        <el-form-item>
            <el-button type="primary" @click="cancel">取消</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">保存并提交</el-button>
        </el-form-item>
    </div>
</template>
<script lang="ts">
import { reactive, ref } from 'vue';
import axios from "axios";
import { genFileId } from 'element-plus';
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
export default {
    name: 'SubmitApproval',
    setup() {
        const route = useRoute()
        const router = useRouter()
        let hh = ref(route.query.data)
        let formInline: any = reactive({
            theme: '',
            applyname: "",
            applygrude: '',
            phone: '',
            fixphone: '',
            property: '',
            know: '',
            use: '',
            area: '',
            projectnume: '',
            projecrplanning: "",
            projectinvestment: '',
            designdirection: '',
            designt: '',
            plan: '',
            opinion: '',
            Time: '',
            textarea: ''
        })

        const onSubmit = () => {
            // console.log(111111111)
            // console.log(formInline.applygrude)
            // console.log(formInline.applyname)
            // console.log(formInline.area)
            // console.log(formInline.textarea)
            // console.log(formInline.designdirection)
            // console.log(formInline.designt)
            // console.log(formInline.fixphone)
            // console.log(formInline.know)
            // console.log(formInline.opinion)
            // console.log(formInline.phone)
            // console.log(formInline.plan)
            // console.log(formInline.projecrplanning)
            // console.log(formInline.projectinvestment)
            // console.log(formInline.projectnume)
            // console.log(formInline.property)
            // console.log(formInline.theme)
            // console.log(formInline.Time)

            // console.log(hh.value)

            // console.log(formInline.use)

            axios({
                url: 'http://1.14.73.59:8080/sp/add',
                method: 'post',
                data: {
                    "applygrude": formInline.applygrude,
                    "applyname": formInline.applyname,
                    "area": formInline.area,
                    "body": formInline.textarea,
                    "designdirection": formInline.designdirection,
                    "designt": formInline.designt,
                    "enterpriseId": 5,
                    "fixphone": formInline.fixphone,
                    "know": formInline.know,
                    "opinion": formInline.opinion,
                    "phone": formInline.phone,
                    "plan": formInline.plan,
                    "projecrplanning": formInline.projecrplanning,
                    "projectinvestment": formInline.projectinvestment,
                    "projectnume": formInline.projectnume,
                    "property": formInline.property,
                    "theme": formInline.theme,
                    "time": formInline.Time,
                    "type": hh.value,
                    "use1": formInline.use
                }
            }).then(resp => {
                console.log(resp)
            });
            router.push('/ApprovaChecklist')
        }

        const cancel = () => {

        }
        const upload = ref<UploadInstance>()

        const handleExceed: UploadProps['onExceed'] = (files) => {
            upload.value!.clearFiles()
            const file = files[0] as UploadRawFile
            file.uid = genFileId()
            upload.value!.handleStart(file)
        }

        const submitUpload = () => {
            upload.value!.submit()
        }
        return {
            formInline,
            onSubmit,
            cancel,
            handleExceed,
            submitUpload,
            upload,
            hh
        }
    }
}
</script>
<style scoped>
.text-area {
    width: 825px;
    height: 220px;
    border: 1px solid #e4e4e4;
}

.formcss {
    width: 1120px;
    display: flex;
}

.el-row {
    justify-content: space-between;

}

.hh {
    display: flex;
    align-items: center
}

.box {
    width: 600px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    height: 200px;
    margin-left: 50px;
}

.mybtn {
    width: 300px;
    height: 150px;
    margin-top: 20px;
}

.btn {
    width: 300px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    margin: 0 auto;
}

.myup {
    width: 250px;
    padding-left: 30px;
}

.ml-3 {
    margin-left: 20px;
}
</style>